<script setup>
import api from './api.js'
import tableCommon from "@/utils/tableCommon.js";
import {getToken} from "@/utils/auth.js";

const {proxy} = getCurrentInstance();

const fileList = ref([])
const openFlag = ref(false);
const activeTab = ref('excel');
const uploadFileUrl = ref(import.meta.env.VITE_APP_BASE_API + "/wms/assetItem/importExcel"); // 上传文件服务器地址

const headers = ref({ Authorization: "Bearer " + getToken() });

const emit = defineEmits(['sub']);

function open() {
  openFlag.value = true;
}

function close() {
  openFlag.value = false;
}

function downloadTemplate() {
  api.exportImportTemplate().then(response=> {
    tableCommon.exportExcel(response);
  }).catch((e) => {
    proxy.$modal.alert('下载发生异常');
    console.error(e);
  });
}

/**
 * 处理上传失败
 */
function handleUploadError() {

}

/**
 * 处理上传中
 */
function handleExceed() {

}

/**
 * 处理上传成功
 */
function handleUploadSuccess(de, file) {
  debugger
  close();
  emit('sub');
}

defineExpose({
  open
})

</script>

<template>
  <el-dialog v-model="openFlag" title="导入" width="650">
    <div style="display: flex; ">
      <el-upload
          :action="uploadFileUrl"
          :file-list="fileList"
          :on-error="handleUploadError"
          :on-exceed="handleExceed"
          :on-success="handleUploadSuccess"
          :show-file-list="false"
          :headers="headers"
          class="upload-file-uploader"
          ref="fileUpload"
      >
        <el-button type="primary">导入</el-button>
      </el-upload>

      <el-button type="primary" link @click="downloadTemplate">下载导入模板</el-button>
    </div>
    <div>
      <ul>
        <li>支持导入格式为xlsx的文件(手动修改文件后缀无效)</li>
        <li>模版中的表头不可更改，不可删除</li>
        <li>单次导入新增资产不能超过5000行</li>
        <li>表格中预制数据选项不可自行填写选项中不存在的数据（管理员、资产分类、资产位置等）</li>
      </ul>
    </div>

  </el-dialog>
</template>

<style scoped lang="scss">
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}
</style>